 <template>
  <div>
    <el-steps :active="active" style="width:800px;">
      <el-step title="上传图片" icon="el-icon-picture"></el-step>
      <!-- <el-step
        :title="active === 0 ? '选择语言' : '当前语言：' + languages[selectedLanguageIndex].name"
        icon="el-icon-setting"
      ></el-step>-->
      <el-step title="上传语音" icon="el-icon-upload" description="语音文件批量上传时，文件名需要与图片文件名一一对应，单个修改则不必对应"></el-step>
      <el-step
        title="编辑文本"
        icon="el-icon-edit"
        description="Excel文件第一行必须填写对应语言的code（如：中文: zh, 英语：en, 法语： fr）,第一列必须填写与图片文件名一致的名称（无后缀），对应第二行填写图片对应的描述文本"
      ></el-step>
    </el-steps>

    <div class="btn-container">
      <div>
        <!-- 华为云 -->
        <!-- <el-upload
          class="upload-demo"
          :action="uploadUrl"
          multiple
          :limit="10"
          accept=".gif, .jpg, .jpeg, .bmp, .png"
          :on-success="handleImgageSuccess"
          v-show="active === 0"
          icon="el-icon-picture"
          :headers="token"
        >
          <el-button size="small" class="add-style" type="primary">批量上传图片</el-button>
        </el-upload>-->
        <!-- 七牛云 -->
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          multiple
          :limit="10"
          accept=".gif, .jpg, .jpeg, .bmp, .png"
          :on-success="handleImgageSuccess"
          v-show="active === 0"
          icon="el-icon-picture"
          :data="token"
        >
          <el-button size="small" class="add-style" type="primary">批量上传图片</el-button>
        </el-upload>

        <el-upload
          class="upload-demo"
          multiple
          :action="uploadUrl"
          :limit="10"
          accept="audio/mpeg, audio/ogg, application/ogg"
          :on-success="handleAudioSuccess"
          v-show="active === 1"
          :data="audioToken"
          icon="el-icon-picture"
        >
          <el-button size="small" class="add-style" type="primary">批量上传音频</el-button>
        </el-upload>

        <div v-show="active === 2" icon="el-icon-edit" @click="change_text();">
          <el-button size="small" class="add-style" type="primary">文字上传</el-button>
        </div>
        <input
          type="file"
          accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          ref="pickerText"
          @change="uploadXLSX"
          style="display: none"
        >
      </div>

      <div>
        <el-button @click="active--" :disabled="active == 0">上一步</el-button>
        <el-button @click="next" :disabled="active == 2">下一步</el-button>
      </div>
    </div>

    <div class="chooseLanguage">
      <el-card shadow="never">
        <div>
          <div class="el-icon-info" style="color:#999;margin-bottom: 20px;">选择语言，上传对应的语音</div>
        </div>
        <el-radio
          v-for="(item, index) in languages"
          :label="index"
          :key="index"
          v-model="selectedLanguageIndex"
        >{{item.name}}</el-radio>
      </el-card>
    </div>

    <!-- 卡片列表 -->
    <div class="listCard">
      <CardList
        :cardData.sync="newCardData"
        :currentCode.sync="languages[selectedLanguageIndex] && languages[selectedLanguageIndex].code"
      ></CardList>
    </div>
  </div>
</template>

<script>
import CardList from "./cardList.vue";
import { uploadXLSX } from "api/upload.js";
import { getToken } from "src/util/auth";
import { getQiNiuToken, getAudioToken } from "src/util/uploadToken";

import {
  huaweiuploadUrl,
  quniuUploadUrl,
  quniudownHost,
  uploadUrl,
  quniuAudioDownHost
} from "src/config/env.js"; // [华为云] [七牛云] [下载地址] [七牛云下载地址] [本地图片上传]

export default {
  data() {
    return {
      active: 0, //当前显示步骤【0: 上传图片， 1：上传语音， 2：上传文字】
      selectedLanguageIndex: 0, //当前选择的语言
      fileList: [], //批量上传的图片名
      newCardData: this.cardData, //卡片列表信息
      token: { Authorization: "" }, // 上传图片需要添加token
      audioToken: { token: "" }, // 音频上传携带的token 【七牛云】
      uploadUrl: quniuUploadUrl
    };
  },
  components: { CardList },
  props: ["cardData", "languages"],
  watch: {
    cardData: {
      handler: function(newVal, oldVal) {
        this.newCardData = newVal;
      },
      deep: true
    },
    newCardData: {
      handler: function(newVal, oldVal) {
        this.$emit("update:cardData", newVal);
      },
      deep: true
    }
  },
  mounted() {
    this.setToken(); // 获取图片上传token
  },
  methods: {
    setToken() {
      // this.token = {Authorization: getToken()} ; // 图片上传携带的token 【华为云】【本地上传】
      this.token = { token: getQiNiuToken() }; // 图片上传携带的token 【七牛云】
      this.audioToken = { token: getAudioToken() }; // 音频上传携带的token 【七牛云】
    },
    next() {
      if (this.active === 0 && this.newCardData.length === 0) {
        this.$message.error("请上传图片");
      } else {
        this.active++;
      }
    },
    // 音频上传处理
    handleAudioSuccess(res, file) {
      var newCardData = this.newCardData;
      let index = this.selectedLanguageIndex;
      if (!this.languages[index]) {
        this.$message.error("请先选择语言");
      }
      newCardData = newCardData.map(item => {
        var fileName = file.name.split(".")[0]; //(去除后缀在进行对比)获取的音频文件名与数组中的文件名对比，音频文件上传到对应的图片数组中
        if (item.imgName === fileName) {
          var code = this.languages[index].code; //当前选择的语言code
          item.audios[code] = quniuAudioDownHost + res.key;
        }
        return item;
      });
      this.newCardData = newCardData;
    },
    // 图片上传处理
    handleImgageSuccess(res, file) {
      // 数据上传是异步的，如果使用this.itemData进行数据传递，下一次的数据就会覆盖上一次的数据造成数据混乱，所以不能提前定义数据
      // 七牛云
      let img = quniudownHost + res.key + "/wm.jpg";

      this.newCardData.push({
        img: img,
        imgName: file.name.split(".")[0],
        audios: {},
        names: {},
        isEdit: false, //编辑文本标识
        isDelete: false, //删除标识
        isPlay: false //播放音频标识
      });
    },
    change_text() {
      this.$refs.pickerText.click();
    },

    // 文本上传
    uploadXLSX(event) {
      uploadXLSX(event).then(res => {
        let newCardData = this.newCardData;
        this.newCardData = newCardData.map((item, index) => {
          for (let name in res) {
            if (item.imgName === name) {
              item.names = res[name];
            }
          }
          return item;
        });
      });

      // 重置input-file的值，相同文件可以重复触发file
      this.$refs.pickerText.value = null;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.btn-container {
  @include fj(space-between);
  margin: 20px;
  width: 700px;
}
.chooseLanguage {
  margin: 10px;
  width: 500px;
}
.progress-container {
  width: 200px;
  margin: 10px 20px;
}
.flex-contaier {
  @include fj(flex-start);
}

.img {
  width: 20px;
  height: 20px;
  padding-right: 6px;
}
</style>
